<!--
 * @Author: Qimu
 * @Date: 2020-06-26 01:38:18
 * @LastEditors: Qimu
 * @LastEditTime: 2020-06-30 01:04:37
 * @Description: file content
 * @FilePath: \vue-admin-koa2\vue-admin\src\views\Article\ArticleCategory.vue
--> 
<template>
  <div class="article">
    <!-- 内容区域 start-->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="5">
          <!-- <el-input placeholder="请输入内容" size="mini" clearable @clear="getUserList"> -->
          <!--  v-model="queryInfo.query" -->
          <!-- <el-button slot="append" icon="el-icon-search" size="mini" @click="getUserList"></el-button>
          </el-input>-->
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="mini" @click="dialog = true">添加文章分类</el-button>
        </el-col>
      </el-row>

      <!-- 文章分类列表区域 start-->
      <el-table :data="articleCategoryList" border size="small">
        <el-table-column align="center" label="#" type="index"></el-table-column>
        <el-table-column align="center" label="分类名" prop="category_name"></el-table-column>
        <el-table-column align="center" label="分类简述" prop="category_sketch"></el-table-column>
        <el-table-column align="center" label="状态" prop="category_status">
          <template slot-scope="scope">
            <el-tag type="success">{{scope.row.category_status===1? "启用":"停用"}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" prop="category_createTime"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editCategoryDialog(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteCategoryDialog(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 文章分类列表区域 end-->

      <!-- 分页 -->
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>-->

      <!-- 抽屉功能 start-->
      <el-drawer
        title="新增文章分类"
        :before-close="handleClose"
        :visible.sync="dialog"
        :with-header="false"
        custom-class="demo-drawer"
        ref="drawer"
      >
        <div class="drawer_content">
          <h3>新增文章分类</h3>
          <el-form
            :inline="true"
            label-width="auto"
            :model="setCategoryform"
            ref="setCategoryform"
            size="mini"
          >
            <el-form-item label="分类名" prop="category_name">
              <el-input v-model="setCategoryform.category_name"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="category_status">
              <el-input :disabled="true" v-model="setCategoryform.category_status"></el-input>
            </el-form-item>
            <el-form-item label="分类简述" prop="category_sketch">
              <el-input type="textarea" v-model="setCategoryform.category_sketch"></el-input>
            </el-form-item>
          </el-form>
          <div class="drawer_footer">
            <el-button @click="cancelForm" size="mini">取 消</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="setCategory"
              :loading="loading"
            >{{ loading ? '提交中 ...' : '确 定' }}</el-button>
          </div>
        </div>
      </el-drawer>
      <!-- 抽屉功能 end-->
    </el-card>
    <!-- 内容区域 end-->

    <!-- 编辑文章分类 start-->
    <EditCategoryDialog
      :editArticleCategoryFormCom="editArticleCategoryFormCom"
      @confirmEditArticleCategory="confirmEditArticleCategory"
    ></EditCategoryDialog>
    <!-- 编辑文章分类 end -->
  </div>
</template>

<script>
import utils from '../../plugins/utils'
import { mapGetters } from 'vuex'

export default {
  components: {
    EditCategoryDialog: () => import('@/components/Dialogs/EditCategory.vue')
  },
  props: {},
  data() {
    return {
      // queryInfo: {
      //   //文章数据列表请求参数
      //   query: '', //查询参数
      //   pagenum: 1, //当前页码
      //   pagesize: 4 //每页显示条数
      // },
      // total: 0, //列表数据总条数
      dialog: false, //控制抽屉的隐藏和显示
      loading: false,
      //新增文章分类
      setCategoryform: {
        category_name: '', //文章分类名
        category_status: 1, //文章状态
        category_sketch: '' //文章简述
      },
      editArticleCategoryFormCom: {
        editArticleCategoryForm: {}, //编辑文章分类表单
        editArticleCategoryDialogVisible: false //编辑文章分类弹框默认状态
      }
    }
  },
  created() {
    this.getArticleCategoryList()
  },
  computed: {
    ...mapGetters(['articleCategoryList'])
  },
  methods: {
    //新增文章信息
    async setCategory() {
      const {
        category_name,
        category_status,
        category_sketch
      } = this.setCategoryform
      const { data: res } = await this.$api.article.setCategory(
        this.setCategoryform
      )
      if (res.meta.status !== 200) {
        this.$message.error({ message: res.meta.message }) //文章分类保存失败
      } else {
        this.$refs.setCategoryform.resetFields() //重置表单内容
        this.$message.success({ message: res.meta.message }) //文章分类保存成功
        this.$store.dispatch('getCategoryList')
      }
    },

    //获取文章列表请求
    async getArticleCategoryList() {
      if (!utils.local.get('articleCategoryList')) {
        const { data: res } = await this.$api.article.articleCategoryList()
        if (res.meta.status !== 200) {
          this.$message.error({ message: res.meta.message })
        } else {
          this.$store.commit('articleCategoryList', res.data)
          // this.total = res.data.total
        }
      }
    },

    //编辑文章对话框点击显示事件
    editCategoryDialog(category) {
      const data = {
        _id: category._id,
        category_name: category.category_name,
        category_sketch: category.category_sketch
      }
      this.editArticleCategoryFormCom.editArticleCategoryForm = data //父组件传值子组件
      this.editArticleCategoryFormCom.editArticleCategoryDialogVisible = true
    },

    //编辑文章对话框的提交事件
    async confirmEditArticleCategory(data) {
      const { data: res } = await this.$api.article.putEditArticleCategory(data)
      if (res.meta.status !== 200) {
        return this.$message.error({ message: res.meta.message })
      } else {
        this.$message.success({ message: res.meta.message })
        this.$store.dispatch('getCategoryList')
      }
    },

    //删除选中文章
    async deleteCategoryDialog(del) {
      await this.$confirm('此操作将永久删除该文章分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await this.$api.article.deleteCategory({
            _id: del._id
          })
          if (res.meta.status !== 200) {
            return this.$message.error({ message: res.meta.message })
          } else {
            this.$message.success({ message: res.meta.message })
            this.$store.dispatch('getCategoryList')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消文章分类删除'
          })
        })
    },

    //抽屉功能
    handleClose(done) {
      this.loading = false
      this.dialog = false
    },

    cancelForm() {
      this.loading = false
      this.dialog = false
    }

    //页码大小
    // handleSizeChange(newSize) {
    //   this.queryInfo.pagesize = newSize
    //   this.getUserList()
    // },

    //当前页变动
    // handleCurrentChange(newPage) {
    //   this.queryInfo.pagenum = newPage
    //   this.getUserList()
    // },
  }
}
</script>
<style lang="sass" scoped>
.drawer_content
  padding-left: 15px
  .el-form
    width: 600px
    padding: 15px
    .el-input,.el-select
      width: 150px

.el-drawer
  outline: none
  height: 100%

.demo-drawer__footer
  margin-left: 20px
</style>